<template>
  <div class="attr-page">
    <!-- 按钮集合 -->
    <div class="page-header">
      <el-input v-model="searchInputStr" placeholder="请输入商品名称或规格名称" class="search-input"></el-input>
      <el-button type="primary" :icon="Search" @click="search_btn">搜索</el-button>
    </div>
    <!-- 商品规格表部分 -->
    <el-table :data="commodityStandardList" border style="width: 100%" row-key="id">
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="commodityName" label="商品名称" width="180"/>
      <el-table-column prop="commodityAttr" label="商品规格" />
      <el-table-column prop="commodityPrice" label="当前规格商品单价" />
      <el-table-column prop="commodityStore" label="当前规格商品库存" />
      <el-table-column prop="updateTime" label="商品规格更新时间" />
      <el-table-column prop="createTime" label="商品规格创建时间" />
      <el-table-column label="操作" width="130">
        <template #="{row,$index}">
          <el-button v-if="row.children !== undefined" :icon="Plus" type="primary" title="添加商品规格" @click="addStandard_btn(row)"></el-button>
          <el-button v-if="row.children === undefined" :icon="Edit" type="success" title="编辑商品规格" @click="editStandard_btn(row)"></el-button>
          <el-popconfirm v-if="row.children === undefined" title="确定要删除该商品规格吗?" @confirm="deleteStandard_btn(row)">
            <template #reference>
              <el-button :icon="Delete" type="info" title="删除商品规格"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器部分 -->
    <el-pagination background layout="prev, pager, next, total, sizes, ->, jumper" :total="standardTotal" :page-sizes="[3,5,10,20,30,50]" :default-current-page="pagination_page" :default-page-size="pagination_size" @change="pagination_change" class="page-pagination"/>
    <!-- el-dialog弹出层部分 -->
    <el-dialog v-model="isShowDialogForm" :title="dialog_form_state === 0 ? '添加商品规格' : '修改商品规格' " width="700">
      <el-form :model="standardForm">
        <el-form-item label="商品名称:" label-width="150">
          <span class="standardForm_commodityName">{{ standardForm.commodityName }}</span>
        </el-form-item>
        <el-form-item label="商品规格:" label-width="150">
          <el-input v-model="standardForm.commodityStandard.commodityAttr" autocomplete="off" placeholder="请输入商品规格名称" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="规格订价(￥):" label-width="150">
          <el-input v-model="standardForm.commodityStandard.commodityPrice" autocomplete="off" style="width: 400px;" />
        </el-form-item>
        <el-form-item label="规格库存(件):" label-width="150">
          <el-input v-model="standardForm.commodityStandard.commodityStore" autocomplete="off" style="width: 400px;" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogCancle_btn">取消</el-button>
          <el-button type="primary" @click="dialogConfirm_btn">提交</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue";
//引入ElementPlus组件
import { ElTable, ElTableColumn, ElButton, ElPagination, ElInput, ElMessage, ElDialog, ElForm, ElFormItem, ElPopconfirm } from "element-plus";
import { Delete, Edit, Plus, Search } from '@element-plus/icons-vue';
//引入请求函数
import { reqCommodityList, reqSaveCommodityStandard, reqUpdateCommodityStandard, reqDeleteCommodityStandard, reqCommodityListByCommodityNmae } from "@/api/standard/index.ts";
//引入类型约束
import { commodityInfo } from "@/api/standard/type.ts";

//商品规格列表数据
let commodityStandardList = ref([]);
//搜索框输入收集
let searchInputStr = ref("");
//分页器部分相关数据
let pagination_page = ref(1);
let pagination_size = ref(3);
let standardTotal = ref(0);
//el-dialog弹出层部分数据
let isShowDialogForm = ref(false);
let dialog_form_state = ref(0);  //dialog弹出层状态 0-添加商品规格 1-修改商品规格
let standardForm = reactive({
  commodityCategoryId:0,
  commodityId:0,
  commodityName:"",
  commodityStandard:{
    id:0,
    commodityAttr:"",
    commodityPrice:0,
    commodityStore:0
  }
})

//顶部搜索按钮搜索事件
const search_btn = async () => {
  if(searchInputStr.value.trim() === "") return ElMessage({type:"info",message:"输入的内容为空!"});
  let res = await reqCommodityListByCommodityNmae(searchInputStr.value);
  if(res.code === 200) {
    ElMessage({type:"success",message:"数据搜索成功!"});
    commodityStandardList.value = dealResponseData(res.data.rows);
    standardTotal.value = res.data.total;
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log('根据商品名称搜索商品信息api',res);
}
//dialog弹出层的相关按钮事件 取消与提交
const dialogCancle_btn = () => {
  //关闭dialog
  isShowDialogForm.value = false;
  //清空数据
  standardForm.commodityCategoryId = 0;
  standardForm.commodityId = 0;
  standardForm.commodityName = "";
  standardForm.commodityStandard = {id:0,commodityAttr:"",commodityPrice:0,commodityStore:0};
  //重置dialog状态
  dialog_form_state.value = 0;
}
const dialogConfirm_btn = async () => {
  //根据条件调用不同请求
  if(dialog_form_state.value === 0) {
    //添加商品规格
    if(standardForm.commodityId === 0 || standardForm.commodityId === null)return;
    if(standardForm.commodityStandard.commodityAttr.trim() === "" || standardForm.commodityStandard.commodityPrice < 0 || standardForm.commodityStandard.commodityStore <0) return ElMessage({type:"info",message:"请正确填写商品规格信息!"});
    //整理参数
    let standard = {commodityId:standardForm.commodityId,commodityAttr:standardForm.commodityStandard.commodityAttr,commodityPrice:standardForm.commodityStandard.commodityPrice,commodityStore:standardForm.commodityStandard.commodityStore};
    let res = await reqSaveCommodityStandard(standard);
    if(res.code === 200) {
      ElMessage({type:"success",message:`商品:${standardForm.commodityName}规格添加成功`});
      //关闭dialog弹框
      dialogCancle_btn();
      //重新请求数据
      getCommodityStandardList(pagination_page.value, pagination_size.value);
    } else {
      ElMessage({type:"error",message:res.msg});
    }
    console.log('添加商品规格api',res);
  } else if(dialog_form_state.value === 1) {
    //修改商品规格
    //添加商品规格
    if(standardForm.commodityStandard.id === 0 || standardForm.commodityStandard.id === null)return;
    if(standardForm.commodityStandard.commodityAttr.trim() === "" || standardForm.commodityStandard.commodityPrice < 0 || standardForm.commodityStandard.commodityStore <0) return ElMessage({type:"info",message:"请正确填写商品规格信息!"});
    //整理参数
    let standard = {id:standardForm.commodityStandard.id,commodityAttr:standardForm.commodityStandard.commodityAttr,commodityPrice:standardForm.commodityStandard.commodityPrice,commodityStore:standardForm.commodityStandard.commodityStore};
    let res = await reqUpdateCommodityStandard(standard);
    if(res.code === 200) {
      ElMessage({type:"success",message:"规格修改成功!"});
      //关闭dialog弹框
      dialogCancle_btn();
      //重新请求数据
      getCommodityStandardList(pagination_page.value,pagination_size.value);
    } else {
      ElMessage({type:"error",message:res.msg});
    }
    console.log('修改商品规格api',res);
  }
}

//商品规格表中的相关按钮事件
const addStandard_btn = (standardInfo:any) => {
  //打开dialog
  isShowDialogForm.value = true;
  //修改dialog状态
  dialog_form_state.value = 0;
  //获取对应规格的商品id和商品名称
  standardForm.commodityId = standardInfo.commodityId;
  standardForm.commodityName = standardInfo.commodityName;
}
const editStandard_btn = (standardInfo:any) => {
  //打开dialog
  isShowDialogForm.value = true;
  //修改dialog状态
  dialog_form_state.value = 1;
  //获取对应规格id和规格其它信息
  standardForm.commodityName = commodityStandardList.value.filter(item => item.commodityId === standardInfo.commodityId)[0].commodityName;
  standardForm.commodityStandard.id = standardInfo.id;
  standardForm.commodityStandard.commodityAttr = standardInfo.commodityAttr;
  standardForm.commodityStandard.commodityPrice = standardInfo.commodityPrice;
  standardForm.commodityStandard.commodityStore = standardInfo.commodityStore;
}
const deleteStandard_btn = async (standardInfo:any) => {
  if(standardInfo.id === 0 || standardInfo.id === undefined)return;
  let res = await reqDeleteCommodityStandard(standardInfo.id);
  if(res.code === 200) {
    ElMessage({type:"success",message:"商品规格删除成功!"});
    //重新请求商品规格信息列表
    getCommodityStandardList(pagination_page.value, pagination_size.value);
  } else {
    ElMessage({type:"error",message:res.msg});
  }
}

//分页器的change事件
const pagination_change = (page:number, pageSize:number) => {
  pagination_page.value = page;
  pagination_size.value = pageSize;
  //重新获取商品规格列表信息
  getCommodityStandardList(page, pageSize);
}

//服务器返回的数据进行整理
const dealResponseData = (commodityList:commodityInfo[]) => {
  commodityList.forEach((item,index) => {
    item.id = index + 1;
    for(let i = 0; i < item.commodityStandardList.length; i++) {
      item.commodityStandardList[i].id = Number(String(index + 1) + String(i + 1));
    }
  })

  let commodityAttrList = commodityList.map((item,index) => {
    return {
      id:item.id,
      commodityCategoryId:item.commodityCategoryId,
      commodityId:item.commodityId,
      commodityName:item.commodityName,
      children:item.commodityStandardList,
    }
  })
  return commodityAttrList;
}

//请求商品规格列表信息
const getCommodityStandardList = async (page:number = 1, pageSize:number = 3) => {
  let res = await reqCommodityList(page, pageSize);
  if(res.code === 200) {
    ElMessage({type:"success",message:"商品规格信息获取成功!"});
    commodityStandardList.value = dealResponseData(res.data.rows);
    standardTotal.value = res.data.total;
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log('分页获取商品信息api',res);
}

//vue生命周期
onMounted(() => {
  //获取商品规格信息
  getCommodityStandardList();
})

</script>

<style lang='scss' scoped>
.attr-page{
  width: 100%;
  height: 100%;

  .page-header{
    width: 100%;
    margin-bottom: 20px;

    .search-input{
      width: 250px;
      margin-right: 20px;
    }
  }

  .page-pagination{
    margin-top: 30px;
  }
}
</style>